@import '~@/libs/style/app/variables.scss';
@import '~@/libs/style/app/mixin.scss';
.g-app__container {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: $--body-background-color;
  .g-app__body {
    display: flex;
    width: 100vw;
    height: 100vh;
    &.g-app__body--horizontal {
      // 水平布局
      flex-direction: row;
      .g-app__body-left {
        position: relative;
        transition: width 0.3s;
        z-index: 99;
      }
      .g-app__body-right {
        flex: 1;
        height: 100vh;
        min-width: 1000px;
        box-sizing: border-box;
        position: relative;
        transition: all 0.3s;
        display: flex;
        flex-direction: column;
      }
    }
    &.g-app__body--vertical {
      // 垂直布局
      flex-direction: column;
      &-right {
        flex: 1;
        height: 100vh;
        min-width: 1000px;
        box-sizing: border-box;
        position: relative;
        display: flex;
        flex-direction: column;
      }
    }

    /*nav bar*/
    .g-app__nav {
      flex-shrink: 0;
      &.g-nav-tag {
        display: flex;
        justify-content: space-between;
        align-items: center;
        z-index: 50;
        position: relative;
        .el-button {
          background-color: #fff;
          width: 28px;
          height: 100%;
          top: 0;
          .el-icon-arrow-left,
          .el-icon-arrow-right {
            color: #222;
            font-size: 16px;
            font-weight: bold;
          }
        }
        .left__icon {
          position: absolute;
          left: 0;
          z-index: 10;
        }
        .contextmenu {
          user-select: none;
          margin: 0;
          padding: 5px 0;
          background: #fff;
          list-style-type: none;
          border-radius: 4px;
          position: absolute;
          font-size: 12px;
          z-index: 888;
          box-shadow: 2px 4px 3px 0 rgba(0, 0, 0, 0.3);
          .g-nav-contextmenu-divide {
            width: 100%;
            height: 1px;
            margin: 4px 0;
          }
          li {
            margin: 0;
            display: flex;
            height: 28px;
            align-items: center;
            min-width: 100px;
            padding: 0 20px 0 10px;
            cursor: pointer;
            white-space: nowrap;
            i {
              font-size: 12px;
              padding-right: 8px;
            }
            &:hover {
              background: #eee;
            }
          }
        }
        .right__icon {
          position: absolute;
          right: 0;
          display: flex;
          height: 100%;
          align-items: center;
          .dropdown__menu {
            width: 32px;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            border-left: 1px solid #f0f0f0;
            background-color: #fff;
            .el-icon-circle-close {
              font-size: 19px;
            }
          }
        }
        .scroll-outer {
          flex: 1;
          box-sizing: border-box;
          height: 35px;
          position: absolute;
          left: 28px;
          right: 61px;
          margin-top: 3px;
          top: 0;
          overflow: visible;
          .scroll-body {
            height: 55px;
            white-space: nowrap;
            transition: 0.4s ease all;
            padding: 2px 5px;
            font-size: 0;
            .nav-tag__item + .nav-tag__item {
              margin-left: 5px;
            }
            .nav-tag__item {
              box-sizing: border-box;
              background: #ffffff;
              color: #515a6e;
              border-radius: 2px;
              height: 32px;
              line-height: 32px;
              text-align: center;
              position: relative;
              display: inline-block;
              padding: 0 0 0 14px;
              border: 1px solid #e8eaec;
              cursor: pointer;
              user-select: none;
              transition: padding 0.4s ease;
              font-size: 0;
              i {
                font-size: 14px;
                color: rgb(227, 229, 231);
              }
              .icon-dot {
                transition: background 0.2s ease;
                display: inline-block;
                width: 12px;
                height: 12px;
                margin-right: 8px;
                border-radius: 50%;
                background: #e8eaec;
                position: relative;
                vertical-align: middle;
              }
              //.no-close-icon {
              //  vertical-align: middle;
              //  margin: 0 7px;
              //}
              .el-icon-close {
                margin-left: 7px;
                color: rgb(227, 229, 231);
                padding: 1px;
                border-radius: 50%;
                opacity: 0;
                transition: 0.41s ease;
                vertical-align: middle;
                display: inline-block;
                &:hover {
                  background-color: $--color-primary;
                  color: #fff !important;
                }
              }
              .nav-item__label {
                display: inline-block;
                width: fit-content;
                white-space: nowrap;
                font-size: 12px;
                vertical-align: top;
                height: 14px;
              }
              &:hover {
                padding-right: 12px;
                color: $--color-primary;
                .icon-dot {
                  background: $--color-primary;
                }
                i {
                  color: $--color-primary;
                }
                .el-icon-close {
                  opacity: 1;
                }
              }
            }
            .nav-tag__item--active {
              padding-right: 10px !important;
              color: $--color-primary !important;
              .icon-dot {
                background: $--color-primary;
              }
              .el-icon-close {
                opacity: 1;
                color: $--color-primary;
              }
            }
            .nav-tag__item--home {
              padding-right: 18px !important;
            }
            .nav-tag__item--ghost {
              border: 1px dashed $--color-primary;
              position: relative;
              padding-right: 12px;
              cursor: move;
              transition: padding 0s;
              &:after {
                content: '';
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                background: $--color-primary;
                opacity: 0.1;
              }
            }
          }
        }
      }
    }

    /* router-view */
    .g-app-view {
      position: relative;
      box-sizing: border-box;
      overflow: hidden auto;
      padding: 3px 12px 0;
      flex: 1;
      &.div--webkit--scrollbar--none {
        &::-webkit-scrollbar {
          display: none !important;
        }
      }
      .g-app-view__breadcrumb {
        position: relative;
        padding-left: 17px;
        @include flex-vertical-center(30px);
        background: #fff;
        flex-shrink: 0;
        .el-breadcrumb {
          font-size: 14px;
        }
        &::before {
          position: absolute;
          left: 15px;
          content: '';
          width: 5px;
          height: 17px;
          top: 50%;
          transform: translate(0, -50%);
          background: $--color-primary;
        }
      }
      .router-view {
        min-height: inherit;
        position: relative;
        box-sizing: border-box;
        padding: 0;
        //box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1);
        border-radius: 4px;
      }
    }
  }

  .g-app-view__footer {
    position: absolute;
    width: 100%;
    bottom: 0;
    right: 0;
    //transform: translateY(100%);
    height: 45px;
    background-color: #f4f4f5;
    z-index: 999;
    padding: 0 15px;
    display: flex;
    align-items: center;
    color: #8c8c8c;
    box-sizing: border-box;
    font-size: 13px;
    border: 1px solid rgba(235, 238, 245, 1);
    border-left: none;
    .bpf-icon-touxiang {
      color: $--color-primary;
      font-size: 30px;
    }
  }
}

body {
  /*进度条加载颜色*/
  #nprogress .bar {
    display: none;
    background: $--color-primary !important; //自定义颜色
  }
}

.el-menu {
  [class^='iconfont-ps'] {
    margin-right: 5px;
    width: 24px;
    text-align: center;
    font-size: 18px;
    vertical-align: middle;
  }
}

.nav-tag__item--drag {
  opacity: 0 !important;
}

/* 设置滚动条的样式 */
*::-webkit-scrollbar {
  width: 13px;
  height: 13px;
}

/* 滚动槽 */
*::-webkit-scrollbar-track {
  //-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  //border-radius: 8px;
}
// 滚动条滑块
*::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.3);
  background-clip: padding-box;
  border: 3px solid transparent;
  border-radius: 7px;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: $--color-primary;
  background-clip: padding-box;
  border: 3px solid transparent;
  border-radius: 7px;
  cursor: grab;
}

*::-webkit-scrollbar-thumb:window-inactive {
  background-color: $--color-primary;
  background-clip: padding-box;
  border: 3px solid transparent;
  border-radius: 7px;
}
